<template>
  <div class="orderDetails-container">
    <orderStatusSeciton
      :orderDetails="orderDetails"
      :id="orderDetails?.id"
      @reload="reload"
    ></orderStatusSeciton>
    <expressInfoSection
      v-if="orderDetails && ![0, 1, 10, 99].includes(orderDetails.orderStatus)"
      :id="orderDetails?.id"
      @reload="reload"
      :orderDetails="orderDetails"
    ></expressInfoSection>
    <receiptInfoSection
      :orderDetails="orderDetails"
      :id="orderDetails?.id"
      @reload="reload"
    ></receiptInfoSection>
    <expressStatusSeciton
      :orderDetails="orderDetails"
      :id="orderDetails?.id"
      @reload="reload"
    ></expressStatusSeciton>
    <div class="content-footer">
      <div>商品金额: {{ footObject.allPrice }}</div>
      <div>运费: {{ footObject.freightAmount }}</div>
      <div>改价: {{ footObject.variableAmount }}</div>
      <div>本单收入: {{ footObject.allValue }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import orderStatusSeciton from '../../components/orderStatusSection/index.vue'
  import expressInfoSection from '../../components/expressInfoSection/index.vue'
  import receiptInfoSection from '../../components/receiptInfoSection/index.vue'
  // eslint-disable-next-line max-len
  import expressStatusSeciton from '../../components/expressStatusSeciton/index.vue'
  import { usePromise } from '@/hooks/core/usePromise'
  import { getOrderDetail } from '@/api/modules/shop'
  import { orderStatusType } from '@/types/shop'
  import { ref } from 'vue'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated'
  import { useRoute } from 'vue-router'
  import { computed } from '@vue/reactivity'
  import { useStore } from 'vuex'

  // ref<Partial<orderStatus>>()
  const orderDetails = ref<orderStatusType>()

  const { to } = usePromise()
  const route = useRoute()

  const footObject = computed(() => {
    if (orderDetails.value && orderDetails.value.orderDetails) {
      // let allPrice = 0
      // orderDetails.value.orderDetails.forEach((item) => {
      //   allPrice += item.goodsPrice * item.num
      // })
      const { orderAmount, freightAmount, variableAmount, paymentAmount } =
        orderDetails.value

      return {
        allPrice: orderAmount / 100 + '元',
        freightAmount: freightAmount / 100 + '元',
        variableAmount:
          (variableAmount > 0
            ? '+' + variableAmount / 100
            : variableAmount / 100) + '元',
        allValue: paymentAmount / 100 + '元',
      }
    } else {
      return {
        allPrice: '暂无数据',
        freightAmount: '暂无数据',
        allValue: '暂无数据',
        variableAmount: '暂无数据',
      }
    }
  })

  const store = useStore()
  onMountedOrActivated(() => {
    reload()
    if (!store.getters.expressTypes || store.getters.expressTypes.length <= 0) {
      store.dispatch('shop/setExpressTypes')
    }
  })
  async function loadOrderDetailsData(id: number) {
    const [err, res] = await to(getOrderDetail(id))
    if (!err && res.data) {
      orderDetails.value = res.data as orderStatusType
      // 订单详情
      // orderDetails.value.orderStatus = 20
    }
  }
  function reload() {
    const { id } = route.query
    if (id) loadOrderDetailsData(parseInt(id as string))
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .orderDetails-container {
    margin: 22px;

    .content-footer {
      text-align: right;
      @include card-shadow;
      background: white;
      padding: 22px 40px;
      margin-bottom: 20px;
    }
  }
</style>
